<!-- <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="apple-itunes-app" content="app-id=1188625501" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>知运下载</title>
    <style>
      .xiazai {
        width: 100%;
        height: 100vh;
        background-image: url("https://o6wndwjxn.qnssl.com/%E8%83%8C%E6%99%AF.png");
        background-repeat: no-repeat;
        background-size: cover;
      }
      .xiazai img {
        top: 5vh;
        width: 95%;
        left: 50%;
        transform: translate(-50%, 0);
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class="xiazai" onclick="myFunction()">
      <img src="https://o6wndwjxn.qnssl.com/down.png" alt="" />
    </div>
  </body>
  <script>
     function myFunction() {
        if (window.__wxjs_is_wkwebview !== true) {
          window.location =
            "https://a.app.qq.com/o/simple.jsp?pkgname=com.zhongtian.zhiyun";
        } else {
          window.location.href =
            "https://itunes.apple.com/cn/app/%E7%9F%A5%E8%BF%90/id1462867435?mt=8";
        }
      }
  </script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 视觉稿宽度为 750, 请设置html的font-size为 37.5px, 以便在布局视口宽度为 375 的页面中自适应 */
    .box {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: #ffffff;
  width: 750px;
  height: 1334px;
}
.bd {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: #ffffff;
  width: 750px;
  height: 216px;
}
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 6px;
  padding-right: 13px;
  padding-left: 12px;
  width: 750px;
  height: 29px;
}
.block {
  display: flex;
  flex-direction: row;
  height: 29px;
}
.color {
  margin-top: 9px;
  border-radius: 11.039237968157977px;
  background-color: #070707;
  width: 11px;
  height: 11px;
}
.color-2 {
  margin-top: 9px;
  margin-left: 3px;
  border-radius: 11.039237968157977px;
  background-color: #070707;
  width: 11px;
  height: 11px;
}
.search {
  margin-top: 9px;
  margin-left: 3px;
  width: 11px;
  height: 11px;
}
.zuanshi {
  margin-top: 5px;
  margin-left: 10px;
  width: 23px;
  height: 19px;
}
.word {
  margin-left: 217px;
  line-height: 25px;
  white-space: pre;
  color: #070707;
  font-family: .HelveticaNeueDeskInterface-Regular;
  font-size: 25px;
}
.lanya {
  margin-top: 1px;
  width: 16px;
  height: 28px;
}
.percent {
  margin-left: 13px;
  line-height: 25px;
  white-space: pre;
  color: #070707;
  font-family: .HelveticaNeueDeskInterface-Regular;
  font-size: 25px;
}
.ren-wrap {
  box-sizing: border-box;
  display: flex;
  position: relative;
  margin-top: 5px;
  margin-right: -4px;
  margin-left: 1px;
  padding-right: 4px;
  width: 49px;
  height: 20px;
}
.mark {
  position: relative;
  width: 45px;
  height: 20px;
}
.ren {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 47px;
  height: 16px;
}
.block-2 {
  display: flex;
  flex-direction: row;
  margin-top: 24px;
  width: 749px;
  height: 50px;
}
.left {
  margin-top: 6px;
  margin-left: 32px;
  width: 22px;
  height: 38px;
}
.coupons {
  margin-left: 266px;
  max-width: 417px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 50px;
  white-space: pre;
  color: #333333;
  font-size: 36px;
  font-weight: 500;
}
.group {
  display: flex;
  flex-direction: row;
  margin-top: 38px;
  width: 749px;
  height: 45px;
}
.coupon-be-received {
  margin-top: 5px;
  margin-left: 118px;
  line-height: 40px;
  white-space: pre;
  color: #666666;
  font-size: 28px;
  font-weight: 400;
}
.benifit {
  margin-left: 225px;
  max-width: 254px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 45px;
  white-space: pre;
  color: #333333;
  font-size: 32px;
  font-weight: 600;
}
.color-div-2 {
  display: flex;
  align-items: flex-start;
  margin-top: 18px;
  margin-left: 545px;
  border-radius: 3px;
  background-color: #da4131;
  width: 36px;
  height: 6px;
}
.main {
  display: flex;
  align-items: flex-start;
  background-color: #e5e5e5;
  width: 750px;
  height: 1px;
}
.submain {
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 41.5px;
  width: 666px;
  height: 156px;
}
.long-bg {
  position: relative;
  width: 686px;
  height: 156px;
  overflow: hidden;
}
.summary {
  position: absolute;
  top: 20px;
  left: 0;
  width: 472px;
  height: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 33px;
  white-space: pre-wrap;
  color: #333333;
  font-size: 24px;
  font-weight: 400;
}
.to {
  position: absolute;
  bottom: 20px;
  left: 0;
  line-height: 30px;
  white-space: pre;
  color: #999999;
  font-size: 22px;
  font-weight: 400;
}
.item-wrap {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  flex-direction: column;
  width: 177px;
  height: 156px;
}
.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 177px;
  height: 156px;
}
.money-wrap {
  display: flex;
  position: relative;
  flex-direction: row;
  margin-top: 21px;
  height: 67px;
}
.rmb {
  margin-top: 24px;
  width: 15px;
  height: 67px;
  text-align: left;
  line-height: 33px;
  white-space: pre;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 400;
}
.money {
  text-align: left;
  line-height: 67px;
  white-space: pre;
  color: #FFFFFF;
  font-size: 48px;
  font-weight: 600;
}
.collection-use {
  position: relative;
  margin-top: 13px;
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 28px;
  white-space: pre;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
}
.row {
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 39px;
  margin-left: 41.5px;
  width: 666px;
  height: 156px;
}
.ft {
  margin-top: 61px;
  margin-left: 290.5px;
  max-width: 447px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 33px;
  white-space: pre;
  color: #999999;
  font-size: 24px;
  font-weight: 400;
}
    </style>
</head>
<body>
  <div class="box">
    <div class="bd">
      <div class="container">
        <div class="block">
          <div class="color" />
          <div class="color-2" />
          <div class="color-2" />
          <img
            class="search"
            src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/525aeba0933911e995ad05f5ef45dc70.png"
          />
          <img
            class="search"
            src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/52833420933911e9a26c61345b243a06.png"
          />
          <img
            class="zuanshi"
            src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/52b31dc0933911e99a52f773e61e846c.png"
          />
          <span class="word">1:20 PM</span>
        </div>
        <div class="block">
          <img
            class="lanya"
            src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/535f1530933911e989ccb7b7e81f7af7.png"
          />
          <span class="percent">77%</span>
          <div class="ren-wrap">
            <img
              class="mark"
              src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/530387b0933911e9b800c7325e90bc4c.png"
            />
            <img
              class="ren"
              src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/53314e70933911e9bbf16750c3b42fab.png"
            />
          </div>
        </div>
      </div>
      <div class="block-2">
        <img
          class="left"
          src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/53889630933911e98c1d5bb0bc6609d7.png"
        />
        <span class="coupons">优惠券</span>
      </div>
      <div class="group">
        <span class="coupon-be-received">待领优惠券</span>
        <span class="benifit">我的优惠券</span>
      </div>
      <div class="color-div-2" />
    </div>
    <div class="main" />
    <div class="submain">
      <img
        class="long-bg"
        src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/53cec6f0933911e9870e57e416b17221.png"
      />
      <span class="summary">世界小姐塑形私教美猫：每天15分钟，教你轻松变身性感“小腰精”</span>
      <span class="to">2019-02-12至2019-03-12</span>
      <div class="item-wrap">
        <img
          class="item"
          src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/540e40f0933911e9a2330b44fae40ec6.png"
        />
        <div class="money-wrap">
          <span class="rmb">¥</span>
          <span class="money">30</span>
        </div>
        <span class="collection-use">领取使用</span>
      </div>
    </div>
    <div class="row">
      <img
        class="long-bg"
        src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/54561f60933911e9b2f91df4c09cdce4.png"
      />
      <span class="summary">世界小姐塑形私教美猫：每天15分钟，教你轻松变身性感“小腰精”</span>
      <span class="to">2019-02-12至2019-03-12</span>
      <div class="item-wrap">
        <img
          class="item"
          src="https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/54856cc0933911e99513a78447b944ac.png"
        />
        <div class="money-wrap">
          <span class="rmb">¥</span>
          <span class="money">30</span>
        </div>
        <span class="collection-use">领取使用</span>
      </div>
    </div>
    <span class="ft">查看失效优惠券</span>
  </div>
</body>
</html>